import React,{Component} from 'react';
import {setToken,setSelectedKey} from "../../actions";
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {Button,Form,Icon,Input,message} from "antd";
import './Login.css';
import logo from '../../images/logo.png';

const FormItem =Form.Item;

class Login extends Component{
    constructor(props){
        super(props);
        this.state={};
    }

    render() {
        const {getFieldDecorator} =this.props.form;
        return(
            <div className={'loginContainer'}>
                <div className={'loginForm'}>
                    <div className={'loginLogo'}>
                        <img src={logo} alt={'logo'}/>
                    </div>
                    <div className={'loginTitle'}>小程序电商系统</div>
                    <Form>
                        <FormItem>
                            {
                                getFieldDecorator('user',{
                                    rules:[{required:true,message:'请输入用户名'}]
                                })(
                                    <Input
                                        prefix={<Icon type={'user'} style={{color:'rgba(0,0,0,.25)'}}/>}
                                        placeholder={'请输入用户名'}/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('psw',{
                                    rules:[{required:true,message:'请输入密码'}]
                                })(
                                    <Input
                                        prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                        placeholder={'请输入密码'} type={'password'}/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            <Button className={'loginFormButton'} type={'primary'} onClick={this.handleLogin}>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        )
    }

    componentDidMount() {
        const hi=name=>`Hi `.concat(name);
        console.log(hi);
        console.log(hi('cbl'));
        const immutableState=Object.freeze({
            minimum:21
        });
        console.log(immutableState.minimum);

        const memoize=function(f){
            const cache={};
            return function(){
                const arg_str=JSON.stringify(arguments);
                cache[arg_str]=cache[arg_str]||f.apply(f,arguments);
                return cache[arg_str];
            }
        };

        const squareNumber=memoize(function(x){
            return x*x;
        });
        console.log(squareNumber(4));
        console.log(squareNumber(4));

        const compose=function(f,g){
          return function(x){
              return f(g(x));
          }
        };

        const toUpperCase=function (x) {
            return x.toUpperCase();
        };
        const exclaim=function (x) {
            return x+'!';
        };

        const head=function(x){
            return x[0];
        };
        const reverse=function (x) {
            return x.reverse();
        };

        const shout=compose(exclaim,compose(toUpperCase,compose(head,reverse)));
        //const initials=compose(join('. '),compose(map(compose(toUpperCase,head)),split(' ')));
        console.log(shout(['send','in','clowns']));
        //console.log(initials('hunter srockton thompson'));
    }

    /**
     * 处理登录事件
     */
    handleLogin=()=>{
        this.props.form.validateFieldsAndScroll((errors,values)=>{
            if(!errors){
                message.success('登录成功');
                this.props.history.push('/index/home');
            }
        });
    }
}
const mapStateToProps=state=>{
    return {
        token:state.setToken
    }
};
const mapDispatchToProps=dispatch=>{
    return{
        setToken:token=>{
            dispatch(setToken(token));
        },
        setSelectedKey:selectedKey=>{
            dispatch(setSelectedKey(selectedKey))
        }
    }
};
Login.propTypes={
    token:PropTypes.string.isRequired,
    setToken:PropTypes.func.isRequired,
    setSelectedKey:PropTypes.func.isRequired
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Form.create()(Login));
